<!DOCTYPE html>
<body class=shadow>
<div id="host">HOST</div>
</body>
<script>
var host = document.getElementById('host');
var root = host.attachShadow({mode: 'open'});
root.innerHTML = '\
<style>\
  :host-context(body.shadow)::before { content: "before shadow root:"; }\
  :host-context(body.light)::before { content: "this should not appear:"; }\
</style>\
<span>SHADOW</span>';
</script>
